<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
    <script src="index.js"></script>
    <style>
        main {
        margin: 0 auto;
        max-width: 640px;
        }

        img {
        height: auto;
        max-width: 100%;
        }

        .full-width {
        position: relative;
        /* left: 50%;
        right: 50%; */
        margin-left: -50vw;
        margin-right: -50vw;
        /* max-width: 100vw;
        width: 100vw; */
        }
    </style>
</head>

<body>

    <div class="shadow"></div>
    <button id="btn">btn</button>
    <button id="btn2">解绑</button>
    <button id="btn4">测试动态添加</button>
    <button id="btn3">添加绑定</button>

    <p id="text"></p>


    <main>
        <h4>Lorem ipsum dolor sit amet</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
          lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
          ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
          eu, faucibus interdum felis.
        </p>
        <p>
          <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
        </p>
        <p>
          Orci varius natoque penatibus et magnis dis parturient montes, nascetur
          ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
          gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
          eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
          Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
        </p>
      </main>

    <time-formatted id="elem" year="numeric" month="long" day="numeric" hour="numeric" minute="numeric" second="numeric" time-zone-name="short"></time-formatted>
    <script>
        let  lock  =  false;            
        let  last  =  0;    
        let c = 500;  
        let arr = [];

        function  getFps()  {     
            if (c > 0)            {
                let  use  =  last  ?  Date.now()  -  last  :  1;                
                let  fps  =  Math.floor(1000  /  use);                
                last  =  Date.now();                
                // text.innerText  =  fps;                
                arr.push(fps)
                requestAnimationFrame(getFps);            
                c--
            } else {
                console.log(arr);
            }

        }            
        getFps();
    </script>

    <script>
        let fn = f1.bind({
            name: '局部Name'
        }, 2)
        let fn2 = f1.bind({
            name: '局部Name'
        }, 3)
        var name = "全局Name"

        function unbind() {
            console.log('btn2');
            btn.removeEventListener('click', fn);
        };

        //btn2.addEventListener('click', test1);

        btn2.addEventListener('click', test2);
        $('#btn2').on('click', test1)

        btn3.addEventListener('click', function() {
            console.log('btn3');
            btn.addEventListener('click', fn)
            btn.addEventListener('click', fn2)
            btn.addEventListener('click', f2)
        })


        //方法
        function f1(a) {
            console.log(this.name, a);
        };

        function f2() {
            console.log("222")
        };

        function test1(e) {
            console.log('test1');
            e.stopPropagation();
            e.preventDefault();
            return false;
        }

        function test2(e) {
            console.log('test2');
            e.stopPropagation();
            return false;
        }
    </script>
</body>

</html>